<template>
  <div id="app">
    <OfficePdf />
    <!-- <PdfSvg /> -->
    <!-- <PdfCanvas /> -->

    <!-- <div class="code-box">
      <CodeMirrorEditor ref="codeEditDom" :value="DisplayFormat" class="content-cls" />
    </div>

    <button @click="test('warning')">
      warning
    </button>

    <button @click="test('success')">
      success
    </button>

    <button @click="test('error')">
      error
    </button> -->

    <!-- <ul>
      <li v-for="item of list" :key="item.label">
        {{ item.label }}
      </li>
    </ul> -->
  </div>
</template>

<script>
import { Toast } from '@/components/Toast'
export default {
  name: 'App',
  components: {
    // CodeMirrorEditor: require('@/components/CodeMirrorEditor0.vue').default,
    OfficePdf: require('@/components/OfficePdf.vue').default
    // PdfCanvas: require('@/components/PdfCanvas.vue').default
  },
  props: {
    msg: {
      type: String,
      default: `以下信息未填写，请补充完整<br/>1、表彰与奖励未填写<br/>2、工作履历未填写<br/>3、材料管理[身份证原件及复印件、离职证明]尚未提交完成，请补全后再提交;[毕业证、学位证原件及复印件]的预计补交日期不能早于今天，请修改<br/><br/>`
    }
  },
  data () {
    return {
      DisplayFormat: `[\n\t{\n\t\t\"equal\": 0,\n\t\t\"values\": [\n\t\t\t\"0\",\n\t\t\t\"45\"\n\t\t],\n\t\t\"cols\": [\n\t\t\t\"APPROVER\"\n\t\t],\n\t\t\"doms\": []\n\t},\n\t{\n\t\t\"equal\": 1,\n\t\t\"values\": [\n\t\t\t\"0\",\n\t\t\t\"1\",\n\t\t\t\"5\",\n\t\t\t\"8\",\n\t\t\t\"9\"\n\t\t],\n\t\t\"cols\": [\n\t\t\t\"APPROVERDEPT\"\n\t\t],\n\t\t\"doms\": []\n\t},\n\t{\n\t\t\"equal\": 1,\n\t\t\"values\": [\n\t\t\t\"10\"\n\t\t],\n\t\t\"cols\": [\n\t\t\t\"APPROVERDEPT\"\n\t\t],\n\t\t\"doms\": [\n\t\t\t\"tr1\",\n\t\t\t\"tr2\"\n\t\t]\n\t}\n]`,
      list: []
    }
  },
  created () {
    for (let i = 0; i < 100; i++) {
      const val = Math.random() * 200
      this.list.push({ label: val + '--' + val + '--' + val + '--' + val + '--' + val + '--' + val + '--' + val })
    }
  },
  methods: {
    test (type) {
      Toast({
        duration: 100,
        msg: this.msg,
        type
      })
    }
  }
}
</script>

<style lang="scss">
.code-box {
  height: 700px;
}
</style>
